<?php 
  include("includes/header.php");
  include("includes/connection.php");

?>

<input type="hidden" id="device_type" value="<?php echo $deviceType ?>">
<input type="hidden" id="script_version" value="<?php echo $scriptVersion ?>">
<section id="company-sect" class="section-image" data-speed="4" data-type="background">
  <div id="first-content" class="content">
    <div id="content-header">
      <div class="content-tab">
        <h1>
          <!-- What we do? -->
          Apa yang kita kerjakan?
        </h1>
        <p style="<?php echo $_p_size; ?>">
          <!-- Azure is a company that helps to develop your business and help your business to survive the technological advances.<br>
          We offer several services to realize what you want to accomplish.<br> -->
          Azure adalah sebuah perusahaan yang dapat membantu untuk mengembangkan bisnis dan membantu agar bisnis anda dapat bertahan dalam menghadapi perkembangan teknologi. <br>
          Kami menawarkan beberapa layanan untuk mencapai tujuan dari perusahaan anda. <br>
        </p>
        <div class="divider"></div>
        <div id="image-port-sect-placer" class="row">
          <div class="col-xs-6 col-sm-3 col-md-3">
            <img src="img/icon-display-1.png" class="img_hover_large">
            <h5>
              Web Development
            </h5>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <img src="img/icon-display-3.png" class="img_hover_large">
            <h5>
              System Development
            </h5>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <img src="img/icon-display-2.png" class="img_hover_large">
            <h5>
              Logo Design
            </h5>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <img src="img/icon-display-4.png" class="img_hover_large">
            <h5>
              SEO Marketing
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="company-detail-sect" class="section-image">
  <div class="content">
    <div id="content-placer" class="row">
      <div class="content-show odd col-md-12">
        <div class="col-xs-12 col-sm-6 col-md-6 text-placer">
          <h4>
            Web Development
          </h4>
          <p style="<?php echo $_p_size; ?>">
            <!-- We provide website development services not just to simply display the information that you have, but to include a more interactive interface and premium design according to your needs.<br>
            How to display informations, is also a major concern for us to create a user friendly website. -->
            Kami menyediakan layanan <i>Web Development</i> tidak hanya untuk memudahkan penyampaian informasi yang Anda miliki, tapi mencakup tampilan yang interaktif dan desain premium sesuai dengan yang Anda butuhkan
          </p>
        </div>
        <div class="col-sm-5 col-md-5 col-md-offset-1 image-placer image-port-placer">
          <div class="display-table">
            <div>
              <img class="img-rounded" src="img/webdesign.png">
            </div>
          </div>
        </div>
      </div>
      
      <div class="clearfix visible-sm visible-xs"></div>

      <div class="content-show even col-md-12">
        <div class="col-sm-5 col-md-5 col-md-offset-1 image-placer image-port-placer">
          <div class="display-table">
            <div>
              <img class="img-rounded" src="img/cog.png">
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 text-placer">
          <h4>
            System Development
          </h4>
          <p style="<?php echo $_p_size; ?>">
            <!-- The development of the internet nowadays, making web-based systems becomes a reliable means to process the information that you have. Our services help the business performance of your company by building web-based systems. -->
            Perkembangan internet saat ini, menjadikan sistem berbasis web menjadi sarana yang dapat diandalkan untuk memproses informasi yang Anda miliki. Kami dapat membantu memperlancar kinerja bisnis perusahaan Anda dengan membangun sebuah sistem berbasis web.
          </p>
        </div>
      </div>

      <div class="clearfix visible-sm visible-xs"></div>

      <div class="content-show odd col-md-12">
        <div class="col-xs-12 col-sm-6 col-md-6 text-placer">
          <h4>Logo Design</h4>
          <p style="<?php echo $_p_size; ?>">
            <!-- The logo is a unique identity that will represent who you are and what you do. It can give more traction to the customer. Our task is to design a logo by learning your identity and produce a modern design. -->
            Logo adalah suatu identitas yang unik yang menggambarkan siapa diri Anda dan apa yang Anda kerjakan. Logo dapat memberikan daya tarik kepada pelanggan Anda. Tugas kami adalah mendesain sebuah logo dengan mempelajari identitas anda dan menjadikannya sebuah design yang modern.
          </p>
        </div>
        <div class="col-sm-5 col-md-5 col-md-offset-1 image-placer image-port-placer">
          <div class="display-table">
            <div>
              <img class="img-rounded" src="img/identify.png">
            </div>
          </div>
        </div>
      </div>

      <div class="clearfix visible-sm visible-xs"></div>

      <div class="content-show even col-md-12">
        <div class="col-sm-5 col-md-5 col-md-offset-1 image-placer image-port-placer">
          <div class="display-table">
            <div>
              <img class="img-rounded" src="img/analyst.png">
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 text-placer">
          <h4>
            SEO Marketing
          </h4>
          <p style="<?php echo $_p_size; ?>">
            <!-- Utilizing search engine algorithms to find a website that you have can be one surefire marketing strategies. We help to optimize the search engine search results to display your website into the main results. -->
            Memanfaatkan algoritma mesin pencari untuk menemukan situs web yang Anda miliki dapat menjadi salah satu strategi pemasaran jitu. Kami membantu mengoptimalkan hasil pencarian mesin pencari untuk menampilkan website Anda ke pencarian utama.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="portfolio-sect" class="section-image section-margin" data-speed="4" data-type="background">
  <div class="content">
    <div id="content-header">
      <div class="content-tab text-placer">
        <h1>
          Project
        </h1>
        <p style="<?php echo $_p_size; ?>">
          Kami telah membantu beberapa perusahaan untuk mempermudah proses yang terjadi dalam perusahaan klien kami, baik itu dalam bentuk sistem maupun sebuah website. <br>
          Hasil kerja kami dapat anda lihat dibawah ini. <br>
        </p>
      </div>
    </div>
    <hr>
  </div>
  <article>
    <?php
      $sql = "SELECT * FROM tb_portfolio LIMIT 11";
      $query = mysql_query($sql);
      while ($baris = mysql_fetch_array($query)) {
        ?>
          <div class="lab_item">
            <a href="/port-detail.php?id=<?php echo trim(base64_encode($baris['id'])) ?>" target="_BLANK">
              <div class="hexagon hexagon2 one-link">
                <div class="hexagon-in1">
                  <div class="hexagon-in2 display-table" style="background-image: url('img/portfolio/<?php echo $baris['code']?>/<?php echo $baris['gambar']?>');">
                    <h3>
                      <?php echo $baris['judul'] ?>
                    </h3>
                  </div>
                </div>
              </div>
            </a>
          </div>
        <?php
      }
    ?>
  </article>
  <div class="content">
    <hr>
    <div class="btn-placer">
      <a href="port-all.php" class="btn btn-3 btn-3e icon-arrow-right portall-more"><!-- see all our portfolio --> Lihat seluruh karya kami</a>
    </div>
  </div>
</section>
<section id="contact-sect" class="section-image section-margin">
  <div class="content">
    <div id="content-header">
      <div class="content-tab text-placer">
        <h1>
          <!-- Where to order? -->
          Memerlukan bantuan?
        </h1>
        <p style="<?php echo $_p_size; ?>">
          Anda memerlukan bantuan untuk mengembangkan bisinis Anda?  <br>
          Cukup tinggalkan pesan dengan mengisi form dibawah. <br>
          Kami akan dengan senang hati membantu Anda untuk mengembangkan bisnis Anda. <br>
        </p>
        <div class="divider"></div>
        <div id="content-placer" class="row contact">
          <div id="image-request" class="col-sm-4">
            <img src="/img/mail-2.png" alt="">
          </div>
          <div id="form-request" class="col-sm-8">
            <form role="form" onsubmit="return validate(event)" id="form-contact">
              <div class="form-group">
                <input type="text" class="form-control" id="name" placeholder="Masukkan nama lengkap anda">
                <label for=""><i class="fa fa-user"></i></label>
              </div>
              <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="Masukkan email anda">
                <label for=""><i class="fa fa-envelope"></i></label>
              </div>
              <div class="form-group">
                <textarea class="form-control" id="request" rows="6" placeholder="Silahkan tinggalkan permintaan Anda"></textarea>
              </div>
              <div class="btn-placer">
                <button type="submit" class="btn">I'm Done</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="component-placer">
  <a href="#wheel4" class="wheel-button nw">
    <img src="/img/Azure.png" alt="">
  </a>
  <ul id="wheel4" data-angle="NW" class="wheel">
    <li class="item"><a href="#home"><i class="fa fa-3x fa-facebook"></i></a></li>
    <li class="item"><a href="#home"><i class="fa fa-3x fa-twitter"></i></a></li>
    <li class="item"><a href="#home"><i class="fa fa-3x fa-instagram"></i></a></li>
    <li class="item"><a href="#home"><i class="fa fa-3x fa-google-plus"></i></a></li>
    <li class="item"><a href="#home"><i class="fa fa-3x fa-gamepad"></i></a></li>
  </ul>
</div>

<div id="notif">
  Please Fill the Missing Input.
</div>

<style type="text/css">
  #notif {
    position: fixed;
    top: 100px;
    right: 20px;
    background-color: #F6989D;
    color: white;
    padding: 20px;
    min-width: 300px;
    display: none;
  }
</style>

<script>
  $(document).ready(function() {
    // alert("device type = "+($('#device_type').val())+"; version = "+($('#script_version').val()));

    $('input, textarea').click(function(event) {
      $(this).removeClass('input-error');
    });

    $('.image-port-placer').bind('inview', function(event, visible) {
      if (visible) {
        $(this).stop().animate({ opacity: 1 });
      } else {
        $(this).stop().animate({ opacity: 0 });
      }
    });

    // $('#team-sect').on('click', '.one-link', function(event) {
    //   event.preventDefault();
    //   var id = $(this).closest(".lab_item").find('.id-port').val();
    //   window.open("port-detail.php?id="+id);
    // });
  });

  function validate(event) {
    event.preventDefault();
    name = $('#name').val();
    email = $('#email').val();
    request = $('#request').val();
    
    if(name == '' || email == '' || request == '') {
      if (name == "") { $('#name').addClass('input-error'); };
      if (email == "") { $('#email').addClass('input-error'); };
      if (request == "") { $('#request').addClass('input-error'); };
      $('#notif').html("Please Fill the Missing Input.").show().delay(3000).fadeOut(3000);
      return false;
    } else { 
      $.ajax({
        url: 'send-mail.php',
        type: 'POST',
        data: {
          name: $('#name').val(),
          email: $('#email').val(),
          request: $('#request').val()
        },
        beforeSend: function(data) {
          console.log("sending");
          $('#notif').html("Sending Email...").show().delay(3000).fadeOut(3000);
        },
        success: function(data) {
          $('#notif').html("Request has successfully sent.").show().delay(3000).fadeOut(3000);
        },
        complete: function(data) {
          console.log("complete");
        },
        error: function(data) {
          // $('#notif').html("Error Sending Request.").show().delay(3000).fadeOut(3000);
        }
      })
    }
  }
</script>

<?php include("includes/footer.php"); ?>

